<template>
	<div class="favorite">
		<myNavbar title="我的收藏"></myNavbar>
		<list v-if="favoriteList.length>0">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
				:display="refreshing ? 'show' : 'hide'">
				<text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell>
				<div class="favorite-list" v-for="(item,index) in favoriteList">
					<productRow :product="item" />
					<text class="title2" @click="deleteItem(item.id,index)">&#xe852;</text>
				</div>
				<div class="gap"></div>
			</cell>
			<loading  class="loading" @loading="onloading"
				:display="loadinging ? 'show' : 'hide'">
				<text class="indicator-text">加载中...</text>
			</loading>
		</list>
		<div class="favorite-none" v-if="favoriteList.length==0">
			<image class="favorite-none-image "
				src="https://rzico.oss-cn-shenzhen.aliyuncs.com/none-data/kongneirong.png"></image>
			<text class="favorite-none-text">您还没有相关的收藏</text>
			<text style="font-size: 24px;color: #B0ADBC;margin-top:10px">赶紧去看看有哪些想买的吧</text>
			<div @click="goShopping" class="favorite-none-button">
				<text style="color: white;font-size: 32px;">去逛逛</text>
			</div>
		</div>

	</div>
</template>
<script>
	import {
		list,
		del
	} from '../../../api/favorite'
	import productRow from '../../../components/product/favorite.vue'
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		name: '',
		data() {
			return {
				pageNum: 1,
				pageSize: 20,
				favoriteList: [],
				refreshing: false,
				loadinging: false,
				refreshTitle: '释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.getFavoriteData()
			this.initIconFont()
		},
		methods: {
			//获取收藏夹的数据
			getFavoriteData() {
				var _this = this
				list({
                    pageNum: _this.pageNum,
                    pageSize: _this.pageSize
                }).then(
					res => {
						if (res.type == 'success') {
							res.data.data.forEach(function (item) {
								item.thumbnail = _this.thumbnail(item.thumbnail, 250, 250)
							    _this.favoriteList.push(item)
							})
							_this.loading = _this.pageSize <= res.data.data.length;
						}
					}
				).catch(error => {
					console.log(error)
				})
			},
			goShopping() {
				eeui.openPage({
					url: 'root://pages/index.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			//删除收藏内容
			deleteItem(id, index) {
				var _this = this
				console.log(index)
				eeui.confirm({
					title: "温馨提示",
					message: "您确定取消收藏？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
						del(id).then(res => {
							if (res.type == 'success') {
								_this.favoriteList.splice(index, 1)
							}

						})
					}
				})
			},
			onrefresh(event) {
				var _this = this
				console.log('下拉完成')
				this.refreshing = true
				this.refreshTitle = '加载中...'
				setTimeout(() => {
					_this.pageNum = 1;
					_this.favoriteList = []
					_this.getFavoriteData()
					_this.refreshing = false
				}, 2000)
			},
			onpullingdown(event) {
				console.log('下拉了')
				this.refreshTitle = '释放刷新页面...'
			},
			onloading(event) {
				var _this = this
				this.loadinging = true
				setTimeout(() => {
					if (_this.loading == true) {
						_this.pageNum = this.pageNum + 1;
						_this.getFavoriteData()
					}
					_this.loadinging = false
				}, 2000)
			},

		},
		components: {
			productRow,
			myNavbar

		},
	}
</script>

<style scoped>
	.favorite {
		background-color: rgba(248, 248, 248, 0.8);
		flex: 1;
	}

	.favorite-list {
		padding-left: 20px;
		padding-right: 20px;
		position: relative;
		margin-top: 10px;
	}

	.navbar {
		width: 750px;
		height: 100px;
		margin-bottom: 20px;
	}

	.delete {
		width: 50px;
		height: 50px;
		font-size: 40px;
		line-height: 50px;
		text-align: center;
		position: absolute;
		bottom: 10px;
		right: 30px;
	}


	.favorite-list-date {}

	.favorite-productList {
		width: 750px;
		display: flex;
		flex-direction: row;
		/* justify-content: space-around; */
		flex-wrap: wrap;
	}

	.title2 {
		position: absolute;
		bottom: 20px;
		right: 70px;
		color: gray;
		font-size: 36px;
		font-family: iconfont2;
		margin: 0 20px;
		color: #cccccc;
	}

	.favorite-productList-item {
		align-content: center;
		width: 215px;
		margin-top: 30px;
		margin-right: 26px;
		/* padding: 30px 0; */
		/* background: rgba(255, 255, 255, 1); */
		/* border-radius: 16px; */
		/* box-shadow: 10px 10px 5px #eeeeef; */
		position: relative;
	}

	.mask {
		opacity: 0.5;
	}

	.favorite-productList-item-tag {
		position: absolute;
		right: 15px;
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		padding: 2px;
		border: 1px solid rgba(200, 200, 212, 0.6);
		border-radius: 2px;
		letter-spacing: 2px;
	}

	.favorite-productList-item-tag view {
		padding: 8px 12px;
		background: linear-gradient(0deg, rgba(189, 191, 198, 1) 0%, rgba(214, 215, 216, 1) 100%);
		border-radius: 1px;
	}

	.favorite-productList-item image {
		width: 215px;
		height: 215px;
		display: inline-block;
		/* margin: 0 auto; */
		/* padding: 0 5px; */
		background: rgba(255, 255, 255, 1);
		border-radius: 16px;
	}

	.favorite-productName {
		font-size: 24px;
		font-family: PingFang SC;
		font-weight: 400;
		height: 72px;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		margin-top: 20px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		padding: 0 15px;
	}

	.favorite-productList-item-bottom {
		display: flex;
		align-items: center;
		font-size: 20px;
		flex-direction: row;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(227, 93, 87, 1);
		justify-content: space-between;
		margin-top: 20px;
		padding: 0 15px;
	}

	.favorite-productList-item-bottom text {
		font-size: 25px;
	}



	.favorite-none {
		width: 750px;
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
	}

	.favorite-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 200px;
		height: 200px;
	}

	.favorite-none-text {
		text-align: center;
		letter-spacing: 5px;
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42px;
		margin-top: 30px;
	}

	.favorite-none-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 338px;
		height: 82px;
		margin-top: 30px;
		background-color: rgba(227, 93, 87, 1);
		border-radius: 8px;
	}

	.gap {
		height: 80px;
	}

	.refresh {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}

	.loading {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}

	.indicator-text {
		color: #888888;
		font-size: 22px;
		text-align: center;
		padding-top: 20px;
	}

	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;
		color: blue;
	}
</style>
